tags: iThome 鐵人賽 30天

昨天打早好了第一個Component，但其實就是一個靜態的原件，今天要來讓Component可以多一點變化，讓Component可以依照傳遞變數來更新裡面的內容。

Props

方法很簡單，跟className與style相同，都是直接寫在引用的component內，來看看範例吧

<Header value={"要傳入的值"} />

以上面的程式碼為例，表示說要傳入名為value的變數，並且value的值為"要傳入的值"。

那麼傳進去後要怎麼樣才能拿到value呢？這時候就要講到props了。

以component為例，可以用this.props來取出全部傳進去的變數，現在就來動手實作看看把Title傳遞進去吧！

App.js

<Header title="影片標記系統" />

接下來來查看title有沒有正確傳遞進去。

Header.jsx

import React, { Component } from 'react'

export default class Header extends Component {
  render() {
    console.log(this.props)

    return (
      <div className="header">
            <h3>Header</h3>
      </div>
    )
  }
}

在render內加上console.log(this.props)來查看title有沒有在裡面。

問題來了？console.log所印出來的東西要到哪裡查看？？？

DevTools開發者工具

每個瀏覽器內都一定會有的工具，當然也是前端開發與debug的小幫手，裡面可以查看console和network的傳遞，實在是非常的方便。

那要怎麼打開呢？ (Google Chrome)

• 把瀏覽器切換到我們npm start後所開啟的頁面 (http://localhost:3000/)
• 點選瀏覽器右上角的三個點點 (自訂及管理Google Chrome) -> 更多工具 -> 開發人員工具
  
• 開啟後把視窗切換到Console
  

打開後就會發現你在js內打印的內容都會出現在這裡啦~

查看傳遞的props

把Object點開後，會發現我們的props裡面有個title並附上它的值，那代表我們成功傳遞參數進去啦！

運用變數進入html

React有個特性，就是能夠在html內撰寫js程式碼，只要在html內加上{}，在大括號裡面就能撰寫js了！原本介面上我們的Title是Header，馬上來改成傳遞進來的變數吧！

Header.jsx

import React, { Component } from 'react'

export default class Header extends Component {
  render() {
    return (
      <div className="header">
            <h3>{this.props.title}</h3>
      </div>
    )
  }
}

前端介面

前端網頁的文字正確變更為影片標記系統了。

後記

porps的基本教學就大致到這，除了props外，component內還有自己的一套變數管理的方式 (state)，明天就來大致講解一下state吧。

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)